<script setup lang="ts">
import { ref, onBeforeMount, nextTick } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { UserLayout } from '@/layouts'
import accountForm from './account.vue'
import phoneForm from './phone.vue'
import { ElMessage as message } from 'element-plus'
import {useUserStore } from '@/store'
import { loginByWxScan, getSuccessStatus } from '@/api/login'

const route = useRoute()
const router = useRouter()
const activeName = ref<'account' | 'phone'>('account')
const visible = ref(false)
const userStore = useUserStore()
const wx_qrCode_state = ref('')
const web_url = 'https://www.baidu.com' // 系统线上地址
const web_appid = 'web_appid'
const wxBindKey = ref('')
if (userStore.loginInfo.activeTab) activeName.value = userStore.loginInfo.activeTab

onBeforeMount(() => {
	if (route.query.code) {
		// 微信扫码登录授权成功
		if (route.query.state == wx_qrCode_state.value) {
			// 确保非第三方伪造行为
			login(route.query.code as string)
		}
	}
})

const login = async (code: string) => {
	const res = await loginByWxScan(code)
	if (res.code == getSuccessStatus()) {
		if (!res.data.wxBindKey) {
			// 微信号已绑定过系统用户
			await userStore.login(res.data.token)
			router.push('/')
			userStore.$patch((s) => {
				const {
					loginInfo: { phone },
				} = s
				s.loginInfo = { password: '', username: '', remember: false, phone, id: res.data.id, activeTab: 'account' }
			})
		} else {
			// 未绑定则登录并绑定
			activeName.value = 'phone'
			message.info('当前微信号未绑定用户，请使用手机号登录并绑定')
			wxBindKey.value = res.data.wxBindKey // 手机号登录后记得重置值
		}
	}
}

const handleToggleLoginWay = (key: any) => {
	// console.log(key)
}

const bindCreateWxQrcode = () => {
	visible.value = true
	nextTick(() => {
		wx_qrCode_state.value = Date.now().toString()
		new window.WxLogin({
			self_redirect: false, //true表示手机点击确认登录后可以在 iframe 内跳转到 redirect_uri，默认false
			id: 'login-wxQrcode', // 用于放置二维码的HTML元素ID
			appid: web_appid, // 微信开放平台中网站应用的appid
			scope: 'snsapi_login', // 授权类型，对于扫码登录通常是'snsapi_login'
			redirect_uri: encodeURIComponent(web_url), // 授权后重定向的网页回调地址，必须进行URL编码，必须https协议
			state: wx_qrCode_state.value,
			theme: 'black', // 二维码的颜色风格，如"black"或"white"
			href: '', // 可选，一般为空，除非有特殊需求
		})
	})
}
</script>

<template>
	<UserLayout>
		<div class="login">
			<el-tabs v-model="activeName" class="login-tabs" @tab-click="handleToggleLoginWay">
				<el-tab-pane label="账号登录" name="account">
					<account-form />
				</el-tab-pane>
				<el-tab-pane label="手机号登录" name="phone">
					<phone-form v-model:wxBindKey="wxBindKey" />
				</el-tab-pane>
			</el-tabs>

			<div class="login-footer" style="display: flex; align-items: center">
				<span style="font-size: 14px">其他登录方式：</span>
				<my-icon name="weixin" width="24px" height="24px" @click="bindCreateWxQrcode" />
			</div>
		</div>

		<el-dialog v-model="visible" title="微信扫码登录" width="80%" :modal="false" draggable :close-on-click-modal="false" align-center>
			<div class="wxQrcode-modal-container" style="display: flex; justify-content: center; min-height: 380px">
				<div id="login-wxQrcode"></div>
			</div>
		</el-dialog>
	</UserLayout>
</template>

<style scoped lang="scss"></style>
